<template>
  <div>
    <div class="background-image">
      <img :src="background">
  <div class="block" v-for="fit in fits" :key="fit">
    <span class="demonstration">{{ fit }}</span>
  </div>
</div>
    <!--<el-card class="nocv" v-if="!havecv">暂时没有相关简历信息</el-card>
    <el-card v-if="havecv" v-for="(item, key) in list" :key="key" class="cvcard">
      <div  @click="findDetail(item.cv.id)">
     <img class="cvavatar" :src="item.company.avatar"/>
     <div class="introduce">
       <p>{{item.cv.title}}</p>
       <p>{{item.company.address}}<span>|</span>{{item.company.scale}}<span>|</span>{{item.company.type}}</p>
     </div>
      </div>
    </el-card>-->
    <el-card class="cvresult" v-if="!havecv">搜索简历结果</el-card><!--暂时设置没有信息显示结果-->
    <el-select class="selectcity" v-model="value1" placeholder="选择城市">
    <el-option
      v-for="item in cities"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option> 
    </el-select>
    <el-select class="selectedu" v-model="value3" placeholder="选择学历要求">
    <el-option
      v-for="item in edus"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option> 
    </el-select>
    <el-button class="filter">开始筛选</el-button>

    <el-row>
      <el-card class="showcv">
        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="cvimg">
        <!--<img src="item.student.cvinfo.photo" class="cvimg">-->
        <div class="cvname">
          <p><span>姓名</span></p>
          <!-- <p>{{item.student.userinfo.name}}</p>-->
        </div>
        <div class="cvdetail">
          <p><span>性别</span><span> | </span><span>城市</span></p>
          <p><span>学校</span><span> | </span><span>学历</span><span> | </span><span>专业</span></p>
         <!-- <p>{{item.student.userinfo.sex}}<span> | </span>{{item.student.cvinfo.slocation}}</p>
          <p>{{item.student.userinfo.school}}<span> | </span>{{item.student.userinfo.education}}<span> | </span>{{item.student.userinfo.career}}</p>-->
        </div>
        <el-button type="text" class="button" @click="tocheckresume">详细信息</el-button>
      </el-card>
    </el-row>

    <div class="block">
       <el-pagination
       @current-change="handleCurrentChange"  
       background
       :page-size="page.pageSize"
       layout="total,  prev, pager, next" 
       :total="page.total"
       :current-page="page.pageNum"></el-pagination>
    </div>   

  </div>
</template>

<style>
@import "../css/index.css";
@import "../assets/Animate/animate.min.css";
.background-image{
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.nocv {
  margin: 0px auto auto auto;
  width: 763px;
}
.cvresult {
  margin: 0px auto auto auto;
  width: 763px;
}
.selectcity{
  left: 0px;
  top: 0px;
  width: 300px;
}
.selectedu{
  left: 0px;
  top: 0px;
  width: 300px;
}
.filter{
  left: 0px;
  top: 0px; 
  width: 145px;
}
.showcv {
  margin: 1px auto auto auto;
  width: 763px;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.button {
  padding: 0;
  float: right;
}
.cvimg {
  float: left;
  width: 100px;
  height: 100px;
  margin: auto 14px 20px auto;
}
.cvcard {
  width: 1000px;
  margin: 20px auto auto auto;
}
.cvavatar {
  float: left;
  width: 126px;
  height: 110px;
  margin: auto 14px 20px auto;
}
.cvname {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cvname p {
  font-size: 18px;
  margin-bottom: 14px;
}
.cvdetail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cvdetail p {
  font-size: 15px;
  margin-bottom: 5px;
  color: #999;
}

</style>

<script>
import fetch from '../api/fetch'
export default {
  data () {
    return {
      fit: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      background: require("../assets/background.png"),
      content: localStorage.getItem('content'),
      list: [],
      havecv: false,
      cities: [{
          value: 'othercities',
          label: '其他'
        },{
          value: 'Beijing',
          label: '北京'
        }, {
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Nanjing',
          label: '南京'
        }, {
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Guangzhou',
          label: '广州'
        },{
          value: 'allcities',
          label: '不限'
        }
        ],      
        edus: [{
          value: 'dazhuan',
          label: '大专'
        },{
          value: 'benke',
          label: '本科'
        }, {
          value: 'shuoshi',
          label: '硕士'
        },{
          value: 'boshi',
          label: '博士'
        },{
          value: 'alledus',
          label: '不限'
        }
        ],
        value1: [], 
        value2: [],
    }
  },
  mounted () {
    this.getcv()
  },
  methods: {
    handleCurrentChange(val){
      this.page.pageNum=val;
      this.getData();  //调用getData刷新页面上table和分页模块的数据
    },
    getData(){
      var self = this;  //axios中this指向发生变化, 用self来代替目前this
      var pageNum = {"pageNum":self.page.pageNum}; //想后端传递需要的页码
      self.$http.post(this.HOST+"cvInfo/list",pageNum, {headers: {"Content-Type": "application/json"}})
      .then(res=>{
          self.$set(self,"cvList",res.data.cvList.list)  //table数据更新, 注意着4行的self.$set()中内容, 我们要改变的cvList是在data下面, 所以target参数是"self",key是"cvList";pageSize是在data的page下面, 所以target是self.page, key是"pageSize"
          self.$set(self.page,"pageSize",res.data.cvList.pageSize)
          self.$set(self.page,"total",res.data.cvList.total)
          self.$set(self.page,"pageNum",res.data.cvList.pageNum)
      })
      .catch(err => {
          console.log(err);
      })
    },
    tocheckresume (id) {
      localStorage.setItem('cvId', id)
      this.$router.push({name: 'checkresume'})
    },
    getcv () {
      fetch
        .findcv(this.content.toLowerCase())
        .then(res => {
          if (res.status === 200) {
            if (res.data.success === true) {
              if (res.data.data.cvList.length !== 0) {
                this.list = res.data.data.cvList
                this.havecv = true
              }
            }
          }
        })
        .catch(e => {
          console.log(e)
        })
    },
  },
  created:function(){
    this.getData();   //首次进入页面的时候也去获取一次table的data, page.pageNum设置了初始值是1
  }
}
</script>
